import React, { PureComponent } from 'react';
import { connect } from 'react-redux'
import PropTypes from 'prop-types';
import { message } from 'antd';
import 'antd/lib/message/style';
import './index.less';
import { updateMinCategoryChecked } from '../../../../../../../api';
import { COMMON_SUCCESS_STATE } from '../../../../../../../constant';

class ListMenu extends PureComponent {

  static propTypes = {
    item: PropTypes.array,
    updateItem: PropTypes.func,
    menuListVisible: PropTypes.bool,
    toggleMenuListVisible: PropTypes.func
  };

  // 复选框选择事件
  checkboxChange = async (id, event) => {
    event.stopPropagation();
    const { updateItem } = this.props;
    let checked = event.target.checked;
    updateItem(id, checked);
    let { code } = await updateMinCategoryChecked(id, checked);
    if (code !== COMMON_SUCCESS_STATE) {
      message.error('修改分类数据异常');
    }
  };

  render () {
    const { item, menuListVisible } = this.props;
    return (
      <ul style={{ display: menuListVisible? 'block': 'none' }} ref={(ulCur) => this.cur = ulCur} className="listMenu">
        {
          item ? item.map((item) => (
            <li key={item.id} onClick={(event) => event.stopPropagation()}>
              <input type="checkbox"
                onChange={(event) => this.checkboxChange(item.id, event)}
                checked={item.exist}/>
              {
                item.name
              }
            </li>
          )) : ''
        }
      </ul>
    );
  }
}

export default connect(
  (state) => ({
    menuListVisible: state.menuListVisible
  }), {
  }
)(ListMenu);
